<style lang="less">
  @import './login.less';
  @import '../styles/common.less';
</style>

<template>
  <div class="login" @keydown.enter="handleSubmit">
    <div class="login-con">
      <Card :bordered="false">
        <p slot="title">
          <Icon type="log-in"></Icon>
          欢迎登录
        </p>
        <div class="form-con">
          <Form ref="loginForm" :model="form" :rules="rules">
            <FormItem prop="userName">
              <Input v-model="form.userName" placeholder="请输入手机号" id="username">
              <span slot="prepend">
                                    <Icon :size="16" type="ios-person"></Icon>
                                </span>
              </Input>
            </FormItem>
            <FormItem prop="password">
              <Input type="password" v-model="form.password" placeholder="请输入密码">
              <span slot="prepend">
                                    <Icon :size="14" type="ios-lock"></Icon>
                                </span>
              </Input>
            </FormItem>
            <FormItem>
              <Button @click="handleSubmit" type="primary" long>登录</Button>
            </FormItem>
            <div class="botton">
              <span class="left" @click="registered">注册用户</span>
              <span class="right" @click="resetPwd">找回密码</span>
            </div>
          </Form>
        </div>
      </Card>
    </div>
    <Modal v-model="ApplyListModal" :width="600" :mask-closable="false" :closable="true"
           class-name="vertical-center-modal" class="Modal-Detail-div">
      <h3 slot="header" style="color:#2D8CF0">申请记录</h3>
      <div class="ApplyList">
        <div class="list" v-for="el in ApplyListData">
          <span class="left" v-text="el.title"></span>
          <span class="right" v-text="el.statusName"></span>
        </div>
      </div>
      <div slot="footer">
        <Button type="text" @click="hideApprovalList">取消</Button>
        <Button type="primary" @click="getApplyList">刷新</Button>
        <Button type="primary" @click="toVolunteerApply">成为志愿者</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
  import Cookies from 'js-cookie';
  import Util from '../../libs/util';
  import Nim from '../../libs/mod.nim';
  import Utils from '../../libs/mod.utils';
  import {setToken, getToken} from '@/libs/util'
  export default {
    data () {
      return {
        form: {
          userName: '',
          password: '',
          id: '',
          username: '',
          nim_token: '',
        },
        rules: {
          userName: [
            {required: true, message: '手机号不能为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不能为空', trigger: 'blur'}
          ]
        },
        id: '',
        username: '',
        nim_token: '',
        status: '',
        ApplyListModal: false,
        ApplyListData: [],
      };
    },
    created: function () {
      var _this = this;
      var login_mobile = Utils.getCookie('login_mobile');
      var login_password = Utils.getCookie('login_password');
      if (login_mobile && login_password) {
        login_password = Utils.uncompile(login_password);//解密
        _this.form.userName = login_mobile;
        _this.form.password = login_password;
      }
    },
    mounted () {
      var _this = this;
      _this.$nextTick(function () {
        $('#username input').focus();
        _this.$Message.destroy();
      });
    },
    methods: {
      handleSubmit () {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            var _this = this;
            var data = {
              mobile: _this.form.userName,
              password: _this.form.password,
            };
            var params = {
              url: '/user/login',
              type: Util.method.post,
              data: data,
              success: _successFun
            };
            Util.ajax(_this, params);
            function _successFun(res) {
              if (res.result == 0) {
                var data = res.data;
                var username = data.username;
                var nim_token = data.nim_token;
                var id = data.id;
                var status = data.status;
                _this.id = id;
                _this.username = username;
                _this.nim_token = nim_token;
                _this.status = status;

                var login_password = Utils.compile(_this.form.password);//加密
                Utils.setCookie('login_mobile', _this.form.userName, 30);
                Utils.setCookie('login_password', login_password, 30);

                if (status == 1) {//注册
                  _this.getApplyList();//申请记录
                } else if (status == 2) {//正常
                  _this.getUserInfoFun();
                } else if (status == 3) {//离职
                  _this.$Message.error('用户已离职，请联系人事部门!');
                } else if (status == 4) {//退休
                  _this.$Message.error('用户已退休，请联系人事部门!');
                }
              } else {
                _this.$Message.error('用户名或密码错误!');
              }
            }
          }
        });
      },
      getUserInfoFun: function () {
        var _this = this;
        var data = {
          id: _this.id,
          username: _this.username,
        };
        var params = {
          url: '/user/query',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || {};
            localStorage.setItem('userInfo', Util.toStr(_data));
            var userName = _data.name;
            var username = _data.username;
            var mobile = _data.mobile;
            var avatar = _data.avatar;
            var thumb = avatar.thumb ? avatar.thumb : '';
            Cookies.set('token', _data.id);
            Cookies.set('avatorImgPath', thumb);
            Cookies.set('userName', userName);
            _this.$store.state.user.avatorImgPath = thumb;
            _this.$store.state.user.userName = userName;

            sessionStorage.setItem('nim_username', username);
            sessionStorage.setItem('nim_token', _this.nim_token);

            // 关闭所有，除了home
            var tagNaveListStr = localStorage.getItem('tagNaveList');
            if (tagNaveListStr != '') {
              var tagNaveListNew = [];
              var tagNaveList = Utils.toJson(tagNaveListStr);
              for (var k in tagNaveList) {
                if (!tagNaveList[k]) {
                  continue;
                }
                var name = tagNaveList[k].name;
                if (name == 'home') {
                  tagNaveListNew.push(tagNaveList[k]);
                  break;
                }
              }
              localStorage.setItem('tagNaveList', Utils.toStr(tagNaveListNew))
            }
            _this.$router.push({
              name: '_home'
            });
          } else {
            _this.$Message.error('查询用户信息失败!');
          }
        }
      },
      registered: function () {
        var _this = this;
        _this.$router.push({
          name: 'registered'
        });
      },
      resetPwd: function () {
        var _this = this;
        _this.$router.push({
          name: 'resetPwd'
        });
      },
      hideApprovalList: function () {
        var _this = this;
        _this.ApplyListModal = false;
      },
      // 申请记录
      getApplyList: function () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          filter: 'apply'
        };
        var params = {
          url: '/approval/list',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || {};
            for (var k in _data) {
              if (!_data[k]) {
                continue;
              }
              var status = _data[k].status;
              var statusName = '';
              if (status == 'passed') {
                statusName = '通过';
              } else if (status == 'rejected') {
                statusName = '驳回';
              } else {
                statusName = '申请中';
              }
              _data[k].statusName = statusName;
            }
            _this.ApplyListData = _data;
            _this.ApplyListModal = true;
          } else {
            _this.$Message.error('查询申请记录失败!');
          }
        }
      },
      // 成为志愿者
      toVolunteerApply: function () {
        var _this = this;
        var isApply = true;
        var curApplyList = _this.ApplyListData;
        for (var i in curApplyList) {
          if (curApplyList[i].tid == 12) {//志愿者
            isApply = false;
          }
        }
        if (isApply) {
          var data = {
            mobile: _this.form.userName
          };
          var params = {
            url: '/user/volunteer',
            type: Util.method.get,
            data: data,
            success: _successFun
          };
          Util.ajax(_this, params);
          function _successFun(res) {
            if (res.result == 0) {
              _this.getApplyList();
            } else {
              _this.$Message.error('申请成为志愿者失败!');
            }
          }
        } else {
          _this.$Message.error('志愿者申请已提交，请耐心等候审核结果!');
        }
      }
    }
  }
</script>

<style>

</style>
